<template>
  <div class="register" v-loading="loading">
    <h1>Todo</h1>
    <el-form
      class="form"
      ref="form"
      :model="userInputs"
      label-position="top"
    >
      <el-form-item
        v-for="(config, key) in formConfig"
        :key="key"
        :prop="key"
        size="large"
        label-width="100px"
        :label="config.label + ':'"
        :rules="config.rules"
      >
        <el-input
          v-model.trim="userInputs[key]"
          :type="config.type"
        >
          <template
            #suffix
            v-if="key === 'password' || key === 'dPassword'"
          >
            <el-icon class="hidden-icon" @click="toggleHiddenMode(config)">
              <Hide v-if="config.type === 'password'"></Hide>
              <View v-else></View>
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-row style="justify-content: flex-end; width: 100%;">
          <el-button
            size="default"
            class="login-btn"
            @click="toRegister"
          >
            注册
          </el-button>
        </el-row>
      </el-form-item>
    </el-form>
    <div class="to-login">
      <p @click="switchToRegister" class="p">
        <span>已有账号？去登陆！</span>
        <el-icon class="arrow"><ArrowRight /></el-icon>
      </p>
    </div>
   
  </div>
</template>

<script lang="ts" setup>
import { register } from '&/user'
import { SUCCESS_CODE } from '@/config/requestCode'
import type { FormInstance, FormRules } from 'element-plus'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'

type FormConfig = {
  type: 'text' | 'password',
  label: string,
  rules: any[]
}

const { switchToRegister, validateSpecialChar } = defineProps<{
  switchToRegister: () => void,
  validateSpecialChar: (rule: any, value: any, callback: any) => void
}>()

const form = ref<FormInstance>()
const loading = ref(false)

defineExpose({
  form
})

const validateDpassword = (rule: any, value: any, callback: any) => {
  if (userInputs.dPassword !== userInputs.password) {
    callback(new Error('两次输入密码不一致，请检查'))
  }
  callback()
}

const formConfig = reactive<{[propName: string]: FormConfig}>({
  username: {
    type: 'text',
    label: '用户名',
    rules: [
      { required: true, message: '请输入用户名' },
      { min: 8, max: 16, message: '用户名长度为 8 ~ 16 个字符' }
    ]
  },
  password: {
    type: 'password',
    label: '密码',
    rules: [
      { required: true, message: '请输入密码' },
      { min: 8, max: 16, message: '密码长度为 8 ~ 16 个字符' },
      { validator: validateSpecialChar }
    ]
  },
  dPassword: {
    type: 'password',
    label: '确认密码',
    rules: [
      { required: true, message: '请确认密码' },
      { min: 8, max: 16, message: '密码长度为 8 ~ 16 个字符' },
      { validator: validateSpecialChar },
      { validator: validateDpassword }
    ]
  },
  email: {
    type: 'text',
    label: '邮箱',
    rules: []
  },
  nikeName: {
    type: 'text',
    label: '昵称',
    rules: []
  }
})
const userInputs = reactive<{[propName: string]: string}>({
  username: '',
  password: '',
  dPassword: '',
  email: '',
  nikeName: ''
})

const toggleHiddenMode = (config: FormConfig) => {
  config.type = (config.type === 'password' ? 'text' : 'password')
}
const toRegister = () => {
  form?.value?.validate(valid => {
    if (!valid) {
      return
    }

    loading.value = true
    register(userInputs).then(resp => {
      if (resp && resp.code == SUCCESS_CODE) {
        form?.value?.resetFields()
        switchToRegister()
      }

      ElMessage({
        type: resp.code === SUCCESS_CODE ? 'success' : 'error',
        message: resp.msg
      })
      loading.value = false
    }, err => {
      loading.value = false
    })
  })
}
</script>

<style lang="scss" scoped>
$main-body-bg: #323542;

.register {
  width: 80%;
  margin: 0 auto;
  border-radius: $border-radius;
  background: $main-body-bg;
  padding: 2rem;
  box-sizing: border-box;
  max-width: 500px;

  h1 {
    font-weight: bolder;
    margin-top: 0;
    margin-bottom: .5rem;
    font-size: 2.5rem;
    background: -webkit-linear-gradient(315deg, #42d392 35%, #323542);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .form {
    ::v-deep(.el-form-item__label) {
      color: #fff;
      opacity: .8;
    }

    .hidden-icon {
      cursor: pointer;
    }
  }

  .to-login {
    margin: 0;
    text-align: right;
    font-size: .5rem;
    color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    
    .p {
      cursor: pointer;
      margin: 0;
      &:hover {
        color: #42d392;
      }
    }
    .arrow {
      font-size: .8rem;
      position: relative;
      top: 2px;
    }
  }
}
</style>
